<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <ul class="tab">
    <li>
      <RouterLink to="/home">首页</RouterLink>
    </li>
    <li>
      <RouterLink to="/prod">产品</RouterLink>
    </li>
    <li>
      <RouterLink to="/contact">联系你们</RouterLink>
    </li>
  </ul>
  <!-- 呈现路由路径所对应的组件 -->
  <!-- <RouterView /> -->
  <router-view></router-view>
  <router-view name="foot"></router-view>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang="scss">
.tab {
  li {
    list-style: none;
    padding: 10px 30px;
    display: inline-block;
    background-color: #d8d8d8;
  }
  .active {
    background-color: orange;
    color: #fff;
  }
}
</style>
